<template>
  <div class="green-main" :style="setbackimg()">
    <!-- 左边温度计展示 -->
    <div class="left-data">
      {{ cardmessage.tc }}
      <!-- @/assets/environment-data/PH.png -->
      <!-- <img :src="getimageurl(cardmessage.dataTypeId)" width="50px" height="45px" /> -->
    </div>
    <!-- 中间数据展示 -->
    <div class="center-data">
      <div class="data-two">{{ cardmessage.tb }}</div>
      <div class="data-one">{{ cardmessage.ta }}{{ cardmessage.unit }}</div>
      <!-- <div class="data-three">{{ cardmessage.tc }}</div> -->
    </div>
    <!-- 右侧动态百分比 -->
    <div class="right-data">
      <div class="ani">
        <i
          v-if="cardmessage.jiantoutype === 1"
          class="el-icon-top animation"
        ></i>
        <i
          v-else-if="cardmessage.jiantoutype === 3"
          class="el-icon-bottom animation"
        ></i>
        <div v-else-if="cardmessage.jiantoutype === 2" class="zh-line"></div>
      </div>
      <div>{{ cardmessage.td }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    nowselectdataitemid: {
      type: Number,
      default: () => {
        return 0;
      }
    },
    nowcardmessage: {
      type: Object,
      default: () => {
        return {
          // top: 300,
          // left: 200,
          // ta: "99.9%RH",
          // tb: "09-11 16:04",
          // tc: "监控点8空气湿度",
          // td: "0.73%",
          // dataTypeId: 1,
          // jiantoutype: 1
        };
      }
    }
  },
  data() {
    return {
      // nowselectdataitemid: "",
      cardmessage: {
        // top: 300,
        // left: 200,
        // ta: "99.9%RH",
        // tb: "09-11 16:04",
        // tc: "监控点8空气湿度",
        // td: "0.73%", // 百分比
        // dataTypeId: 1, // 环境数据类型
        // jiantoutype: 1 // 1上 3 下 2平
      }
    };
  },
  watch: {
    nowselectdataitemid: {
      handler(newvalue, oldvalue) {
        this.nowselectdataitemid = newvalue;
        console.log(this.nowselectdataitemid);
        console.log("---");
        console.log(this.cardmessage.dataItemId);
      },
      deep: true
    },
    // var that = this
    nowcardmessage: {
      handler(newvalue, oldvalue) {
        // console.log(oldvalue)
        // console.log(newvalue)
        // let left = newvalue.xaxis
        // let top = newvalue.yaxis
        // let ta = newvalue.lastValue1 + newvalue.symbol
        // let tb = newvalue.collectDatetime.substring(5, 15)
        // let tc = newvalue.dataTypeName
        // let td = newvalue.change
        // let dataTypeId = newvalue.dataTypeId
        // console.log(newvalue)
        this.cardmessage = {
          top: newvalue.yaxis,
          left: newvalue.xaxis,
          ta: newvalue.lastValue1.toFixed(2),
          unit: newvalue.symbol || '',
          tb: this.dateToFormat(newvalue.collectDatetime).substring(5, 16),
          // tc: newvalue.dataTypeName,
          tc: newvalue.dataItemName,
          dataItemId: newvalue.dataItemId,
          td: newvalue.change, // 百分比
          dataTypeId: newvalue.dataTypeId, // 环境数据类型
          jiantoutype: newvalue.status // 1上 3 下 2平
        };
        // console.log("111")
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 设置当前选中的数据项id
    // setnowdataitem(e) {
    //   this.nowselectdataitemid = e
    // },
    // 发挥背景图
    setbackimg() {
      let backurl = require("@/assets/oth-img/bluecard.png");
      if (this.nowselectdataitemid === this.cardmessage.dataItemId) {
        return "background-image:url(" + backurl + ")";
      }
    },
    getimageurl(id) {
      let zhurl = "";
      switch (id) {
        case 14:
          zhurl = require("@/assets/environment-data/illumination.png");
          break;
        case 13:
          zhurl = require("@/assets/environment-data/kongqishidu.png");
          break;
        case 12:
          // 空气温度
          zhurl = require("@/assets/environment-data/kongqiwendu.png");
          break;
        case 11:
          // 土壤湿度
          zhurl = require("@/assets/environment-data/turangshidu.png");
          break;
        case 10:
          // 土壤温度
          zhurl = require("@/assets/environment-data/humidity.png");
          break;
        case 17:
          // 水温
          zhurl = require("@/assets/environment-data/shuiwen-2.png");
          break;
        case 3:
          // 含氧量
          zhurl = require("@/assets/environment-data/hanyangliang.png");
          break;
        case 98:
          // 液位
          zhurl = require("@/assets/environment-data/yewei.png");
          break;
        case 5:
          // 水温
          zhurl = require("@/assets/environment-data/shuiwen-2.png");
          break;
        case 22:
          // 二氧化碳
          zhurl = require("@/assets/environment-data/eryanghuatan.png");
          break;
        case 113:
          // 电能
          zhurl = require("@/assets/environment-data/electric.png");
          break;
        case 38:
          // 电流
          zhurl = require("@/assets/environment-data/current.png");
          break;
        case 23:
          // 电压
          zhurl = require("@/assets/environment-data/voltmeter.png");
          break;
        case 47:
          //  功率
          zhurl = require("@/assets/environment-data/power.png");
          break;

        default:
          zhurl = require("@/assets/environment-data/PH.png");
          break;
      }
      return zhurl;
    }
  }
};
</script>
<style lang="scss" scoped>
.animation {
  -webkit-animation: twinkling 1.8s infinite ease-in-out;
  animation: twinkling 1.8s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animation2 {
  -webkit-animation: twinkling 1.8s infinite ease-in-out;
  animation: twinkling 1.8s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@keyframes twinkling {
  0% {
    opacity: 0.2;
    filter: alpha(opacity=40);
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes twinkling {
  0% {
    opacity: 0.2;
    filter: alpha(opacity=40);
    -webkit-transform: scale(1);
  }
  50% {
    opacity: 0.8;
    filter: alpha(opacity=90);
    -webkit-transform: scale(1.12);
  }
  100% {
    opacity: 0.2;
    filter: alpha(opacity=40);
    -webkit-transform: scale(1);
  }
}
.green-main {
  width: 300px;
  height: 80px;
  padding: 10px;
  // background-color: #1ece4b;
  background-image: url("~@/assets/oth-img/greencard.png");
  background-size: 300px 80px;
  background-repeat: no-repeat;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  // border-radius: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
}
.center-data {
  width: 120px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  margin-left: 10px;
  border-left: #fff dashed 1px;
  border-right: #fff dashed 1px;
  .data-one {
    font-size: 14px;
    line-height: 25px;
    font-weight: 700;
    font-size: 23px;
    white-space: nowrap;
  }
  .data-two {
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
  }
  .data-three {
    font-size: 16px;
    font-weight: 700;
  }
}
.left-data {
  width: 65px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  white-space: pre-wrap;
  margin-left: 25px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
}
.right-data {
  width: 60px;
  height: 80px;
  line-height: 10px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}
.ani {
  animation: 0.1s linear infinite blink;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 25px;
  -webkit-animation: mymove 0.3s linear infinite blink;
}
@keyframes mymove {
  0% {
    color: #fff;
    background-color: #ddd;
  }
  50% {
    background-color: #ddd;
  }
  100% {
    color: #fff;
    background-color: rgb(209, 3, 3);
  }
}
.zh-line {
  border-top: 2px #fff solid;
  height: 10px;
  width: 10px;
  // background-color: #fff;
}
</style>
